<template>
	<view class="time-record">
		<u-popup :show="timeShow" mode="bottom" :round="20" @close="timeShow = false">
			<view class="pop-content">
				<view class="pop-top">
					<view>记录时长</view>
					<u-icon name="arrow-down" color="#fff" @tap="timeShow = false"></u-icon>
				</view>
				<view class="pop-center">
					<view :class="['time', activeTime === item.id ? 'active' : '']" v-for="item in timeColumns"
						:key="item.id" @tap="confirmTime(item)">
						<text>{{ item.date }} {{ item.time }}</text>
						<u-icon v-if="activeTime === item.id" color="#529df8" name="checkmark-circle-fill"></u-icon>
					</view>
				</view>
				<view class="pop-bottom">
					<u-button v-if="!ifCounting" type="primary" text="开始计时" shape="circle" size="large"
						@tap="startCount"></u-button>
					<template v-else>
						<u-icon color="#fff" name="clock" size="30"></u-icon>
						<text>{{ countTime ? countTime : '00:00:00' }}</text>
						<u-button :text="countInterval ? '暂停' : '继续'" @tap="operateInterval" shape="circle"></u-button>
						<u-button text="停止" type="primary" @tap="finishCount" shape="circle"></u-button>
					</template>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import moment from "moment"
	export default {
		name: "timeRecord",
		props: {
			easy: {
				type: Boolean,
				default: false
			},
			activeId: {
				type: Number,
				default: -1
			}
		},
		data() {
			return {
				timeShow: false,
				activeTime: -1,
				timeColumns: [],
				ifCounting: false,
				countNumber: 0,
				countInterval: {},
			};
		},
		watch: {
			timeColumns(oldVal, newVal) {
				if (newVal.length > 0) {
					uni.setStorageSync("timeColumns", newVal)
				}
			},
			activeId: {
				handler(newVal) {
					this.activeTime = newVal
				},
				immediate: true
			}
		},
		computed: {
			countTime() {
				let hour = Math.floor(this.countNumber / 3600)
				let minute = Math.floor((this.countNumber % 3600) / 60);
				let second = this.countNumber % 60;
				return `${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
			}
		},
		methods: {
			open() {
				this.timeColumns = (uni.getStorageSync("timeColumns") || []).filter(item => {
					return item.date === moment().format('YYYY-MM-DD')
				})
				this.timeShow = true
			},

			confirmTime(row) {
				if (!this.easy) {
					this.activeTime = row.id
					this.$emit('confirm', {
						id: row.id,
						time: row.time
					})
				}
			},
			startCount() {
				this.ifCounting = true
				this.countInterval = setInterval(() => {
					this.countNumber++
				}, 1000)
			},
			operateInterval() {
				if (this.countInterval) {
					clearInterval(this.countInterval)
					this.countInterval = undefined
				} else {
					this.countInterval = setInterval(() => {
						this.countNumber++
					}, 1000)
				}
			},
			finishCount() {
				clearInterval(this.countInterval)
				this.timeColumns.push({
					id: +new Date(),
					date: moment().format("YYYY-MM-DD"),
					time: this.countTime
				})
				this.countNumber = 0
				this.ifCounting = false
			},
		}
	}
</script>

<style lang="less" scoped>
	.time-record {
		/deep/ .u-popup {
			.pop-content {
				height: 45vh;
				padding: 20px;
				background-color: #2c2b34;
				color: #fff;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				overflow: hidden;
				display: flex;
				flex-direction: column;

				.pop-top {
					display: flex;
					justify-content: space-between;
					padding-bottom: 10px;
				}

				.pop-center {
					flex: 1;
					overflow-y: scroll;
					display: flex;
					flex-direction: column;
					align-items: center;

					.time {
						width: 90%;
						height: 26px;
						padding: 4px 8px;
						border: 1px solid #fff;
						border-radius: 10px;
						display: flex;
						justify-content: space-between;
						margin-bottom: 20px;

						&.active {
							border-color: #529df8;
						}
					}
				}

				.pop-bottom {
					padding-top: 10px;
					height: 50px;
					display: flex;
					justify-content: space-between;
					align-items: center;

					&>* {
						margin: 0 10px;

						&.u-icon {
							margin: 0;
						}
					}

					&>text {
						margin: 0;
					}
				}
			}

			.u-popup__content {
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				overflow: hidden;
			}
		}
	}
</style>